<script lang="ts">
import { h } from "vue";

export default {
   name: "breadcrumb",
   setup(props:any, context:any) {
      const VDOM:any[] = [];
      context.slots.default().forEach((item:any) => VDOM.push(item));
      return () => h("div", { class: "breadcrumb" }, VDOM);
   },
};
</script>

<style  lang="less">
.breadcrumb {
   display: flex;
   padding: 25px 10px;
   .breadcrumb-item {
      margin-right: 5px;

      a {
         color: #666;
         transition: all .4s;

         &:hover {
            color: @xtxColor;
         }
      }

      i {
         font-size: 12px;
         margin-left: 2px;
         margin-right: 5px;
         line-height: 22px;
      }
   }
}
</style>
